<template>
    <transition
            name="tran_rank"
            enter-active-class="animated fadeIn"
            leave-active-class="animated fadeOut"
    >
    <div class="nav" v-if="show" id="nav">
        <div class="container">
            <el-menu
                    :default-active="activeIndex2"
                    class="el-menu-demo"
                    mode="horizontal"
                    @select="handleSelect"
                    active-text-color="#01aaed"
                    >
                <!--<el-submenu index="2">-->
                    <!--<template slot="title">我的工作台</template>-->
                    <!--<el-menu-item index="2-1">选项1</el-menu-item>-->
                    <!--<el-menu-item index="2-2">选项2</el-menu-item>-->
                    <!--<el-menu-item index="2-3">选项3</el-menu-item>-->
                <!--</el-submenu>-->
                <!--<el-menu-item index="3"><router-link to="/struct_2">排行榜</router-link></el-menu-item>-->
                <!--<el-menu-item index="1"><router-link to="/struct_1">首页</router-link></el-menu-item>-->
                <el-menu-item v-for="(nav,index) in navs" :key="index" :index="index+''"><router-link :to="nav.url">{{nav.title}}</router-link></el-menu-item>
            </el-menu>
        </div>
    </div>
    </transition>
</template>

<script>
    import {log} from '@/assets/js/util.js'
    export default{
        name: 'nav',
        data () {
            return {
                msg: 'nav',
                activeIndex: '1',
                activeIndex2: '1',
                form:{
                    key:''
                },
                show:false,
                navs:[],
            }
        },
        methods: {
            handleSelect(key, keyPath) {
                log(key, keyPath)
            },
            init(){
                var url = server_url+'/api/pages'
                this.$http.jsonp(url, {}, {
                    headers: {},
                    emulateJSON: true
                }).then(function(response) {
                   log(response.data.data)
                    this.navs = response.data.data
//                    for(var i = 0; i< this.navs.length; i++){
//                       this.navs[i].index = i;
//                       if(this.navs[i].children.length != 0){
//                           var childs = this.navs[i];
//                           for(var j = 0; j<childs.length; j++){
//                               childs[j].index = i + '-' + j;
//                           }
//                       }
//                    }
                }, function(response) {
                    log(response)
                });
            }
        },
        mounted:function () {
            this.init()
            this.show = true
        }
    }
</script>

<style>
    /*.el-menu-item.is-active{*/
        /*color: #409EFF;*/
    /*}*/
    .nav{
        box-shadow: 0 0 3px #aaa;
        background-color: hsla(0,0%,100%,.7);
        position: fixed;
        width: 100%;
        z-index: 999;
    }
    .el-menu{
        background-color: inherit !important;
    }
    .nav li{
        float: right !important;
    }
    .container {
        margin: 0 120px;
    }
    @media (min-width: 768px){
        .container{
            max-width: 750px;
        }
    }
    @media (min-width: 992px) {
        .container{
            max-width: 970px;
        }
    }
    @media (min-width: 1200px){
        .container {
            max-width: 1140px;
        }
    }
    .nav li a{
        font-size: 16px;
        padding: 0 15px;
        display: block;
        color: #666;
        transition: all .5s;
        text-decoration: none;
    }
    .el-menu--horizontal .el-menu-item:focus, .el-menu--horizontal .el-menu-item:hover{
        background-color: inherit !important;
    }
    .el-menu--horizontal .el-menu-item a:hover{
        color:#01aaed !important;
    }
    .el-menu--horizontal .el-submenu .el-submenu__title:hover{
        background-color: inherit !important;
        color:#01aaed !important;
    }
    .el-menu--horizontal .el-submenu>.el-menu{
        background-color: hsla(0,0%,100%,.7) !important;
    }
    .el-menu--horizontal .el-submenu .el-menu-item:hover{
        color:#01aaed !important;
    }
    /*.nav li :hover{*/
        /*background-color: hsla(0,0%,100%,.7);*/
    /*}*/

</style>